<template>
  <div class="container-fluid">
    <div class="row">
      <el-breadcrumb separator="/" class="h-breadcrumb">
        <template v-for="(item, index) in list">
          <el-breadcrumb-item :to="item.path">
            <span>{{item.name}}</span>
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HBreadcrumb',
    props: {
      separator: String
    },
    computed: {
      list() {
        const router = []
        const matched = this.$route.matched
        const lenth = matched.length - 1
        if (lenth == 0) {
          router.push({
            name: this.$route.name,
            path: this.$route.path
          })
        } else {
          for (let i = 0; i < lenth; i++) {
            const data = matched[i]
            router.push({
              name: data.name,
              path: data.path
            })
          }
          router.push({
            name: this.$route.name,
            path: this.$route.path
          })
        }
        return router
      }
    }
  }
</script>
